/**
 * JavaScript与HTML页面分离，不要混杂到一起！
 * 
 */


function showPic(whichpic) {
	//显示图片的元素必须存在
  if (!document.getElementById("placeholder")) return true;
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  if (!document.getElementById("description")) return false;
  if (whichpic.getAttribute("title")) {
    var text = whichpic.getAttribute("title");
  } else {
    var text = "";
  }
  var description = document.getElementById("description");
  if (description.firstChild.nodeType == 3) {
    description.firstChild.nodeValue = text;
  }
  //返回false的目的是为了不让浏览器前进到被点链接所指向的目的地
  return false;
}

function prepareGallery() {
	//比较古老的浏览器不支持DOM的方法和属性
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
	}
    links[i].onkeypress = links[i].onclick;
  }
}
/**
 * window.onload事件绑定处理函数，及这些处理函数的执行顺序
 * @param func
 */
function addLoadEvent(func) {
	//把现有的window.onload事件处理函数的值存入变量oldonload
  var oldonload = window.onload;
  //如果window.onload事件处理函数没有绑定任何函数，
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
	 //如果绑定了一些函数，就把新函数追加到已有指令的末尾
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function insertAfter(newElement,targetElement) {
	  var parent = targetElement.parentNode;
	  if (parent.lastChild == targetElement) {
	    parent.appendChild(newElement);
	  } else {
	    parent.insertBefore(newElement,targetElement.nextSibling);
	  }
	}

function preparePlaceholder() {
	  if (!document.createElement) return false;
	  if (!document.createTextNode) return false;
	  if (!document.getElementById) return false;
	  if (!document.getElementById("imagegallery")) return false;
	  var placeholder = document.createElement("img");
	  placeholder.setAttribute("id","placeholder");
	  placeholder.setAttribute("src","images/placeholder.gif");
	  placeholder.setAttribute("alt","my image gallery");
	  var description = document.createElement("p");
	  description.setAttribute("id","description");
	  var desctext = document.createTextNode("Choose an image");
	  description.appendChild(desctext);
	  var gallery = document.getElementById("imagegallery");
	  insertAfter(placeholder,gallery);
	  insertAfter(description,placeholder);
	}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);